<template>
  <el-header>
    <el-menu
        :default-active="activeIndex"
        class="HomeChoose"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
        router
    >
      <el-menu-item index="0">
        <img
            style="width: 60px"
            src="../logo.png"
            alt="SC logo"
        />
      </el-menu-item>
      <div class="flex-grow"/>
      <el-menu-item index="home">
        <el-icon>
          <House/>
        </el-icon>
        首页
      </el-menu-item>
      <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span></template>
        <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
          <el-icon>
            <component :is="child.icon"></component>
          </el-icon>
          {{ child.name }}
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item index="announcement">
        <el-icon>
          <Help/>
        </el-icon>
        公告
      </el-menu-item>
      <el-menu-item index="3">
        <el-icon>
          <Phone/>
        </el-icon>
        联系我们
      </el-menu-item>

      <div class="IDpicture">
        <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
          <template #suffix>
            <el-icon class="el-input__icon">
              <search/>
            </el-icon>
          </template>
        </el-input>
        <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        />
      </div>
    </el-menu>

  </el-header>

  <el-main>
    <div class="tablebox">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="payType"
            label="缴费项目"
            width="320">
        </el-table-column>
        <el-table-column
            prop="payMoney"
            label="缴费金额"
            width="320">
        </el-table-column>
        <el-table-column
            prop="payTime"
            label="缴费时间"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="payState"
            label="缴费状态"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
    </div>

    <div class="buy-box">
      <div class="issue-title1"><h2>请选择支付方式</h2></div>
      <div>
        <el-radio-group class="radio-group" v-model="radio">
          <el-radio :label="3">我的钱包</el-radio>
        </el-radio-group>
      </div>
      <div class="issue-title2"><h4>支付金额</h4></div>
      <div class="issue-title3"><h3>¥{{totalMoney}}</h3></div>
      <div class="button-box">
        <el-row>
          <el-button>取消</el-button>
          <el-button type="primary">确认支付</el-button>
        </el-row>
      </div>
    </div>
  </el-main>
</template>


<script setup>
import {onMounted, ref} from 'vue'
import {ElButton, ElRadio, ElRadioGroup, ElTable, ElTableColumn} from 'element-plus';
import *as stratafees from "../api/stratafees"
import {useStore} from "vuex";
import {useRouter} from "vue-router";


const activeIndex = ref('1')
//页头多级菜单
const menu_data = ref([

  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])
const tableData = ref([]);
const router = useRouter();
const store = useStore();
onMounted(() => {
  console.log("11111111111",store.getters.getId)
  if(store.getters.getId!=0){
    stratafees.queryStratafeesById({userId: store.getters.getId}).then((res) => {

      tableData.value = res.data;

      for (let i = 0; i < tableData.value.length; i++) {
        const item = tableData.value[i];
        // 修改payType
        if (item.payType === 1) {
          item.payType = '水费';
        } // 修改payState
        if (item.payState === 0) {
          item.payState = '已缴费';
        } else if (item.payState === 1) {
          item.payState = '未缴费';
        }
      }
    })
  }
  else if (store.getters.getId==0)
  {
    alert("请登录")
 router.push('/home')
  }

});
const totalMoney = ref(0);
const multipleSelection = ref([]);

const multipleTableRef = ref(null);

const handleSelectionChange = (multipleSelection) => {
  const totalPayMoney = multipleSelection.reduce((sum, row) => {
    // 确保row.payMoney可以转换为数值类型，这里使用parseFloat处理可能的字符串格式
    return sum + (parseFloat(row.payMoney) || 0);
  }, 0); // 初始值设为0
  // 将计算后的总和储存到totalMoney
  totalMoney.value = totalPayMoney;
};
const toggleSelection = (rows = tableData.value) => {
  rows.forEach(row => {
    multipleTableRef.value.toggleRowSelection(row);
  });
};
const radio = ref(3);
</script>

<style scoped>
.el-header {
  height: 10%; /* 使顶级表头header部分占整个屏幕的10% */
}

.el-main {
  height: 90%; /* 剩余部分为main，占90% */
  display: flex;
  flex-direction: column; /* 设置主轴为竖直方向 */
}

.tablebox {
  width: 1700px;
  height: 400px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border-radius: 4px; /* 给盒子添加圆角 */
  border: 1px solid #DCDFE6;
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 50px;
  margin-top: 10px;
}

.buy-box {
  width: 1700px;
  height: 350px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.8); /* 添加阴影效果 */
  border-radius: 4px; /* 给盒子添加圆角 */
  border: 1px solid #DCDFE6;
  background-color: #ffffff; /* 设置背景色，可根据设计调整 */
  padding: 20px; /* 内边距，提升内容的可读性 */
  margin-left: 50px;
  margin-top: 10px;
}

.issue-title1 {
  text-align: left;
  margin-left: 10px;
  margin-top: 10px; /* 可选，为下部内容添加一些间距 */
}

.issue-title2 {
  text-align: left;
  margin-left: 10px;
  margin-top: 50px; /* 可选，为下部内容添加一些间距 */
}

.issue-title3 {
  text-align: left;
  margin-left: 10px;
  margin-top: 50px; /* 可选，为下部内容添加一些间距 */
  color: red;
}

.button-box {
  margin-left: 1250px;
}

.radio-group {
  margin-left: 100px;
  margin-top: 20px;
}

.searchFunction {
  height: 28px;
  width: 80%;
  right: 40px;
}

/*头部边框阴影*/
.el-header {
  width: 100%;
}

.HomeChoose {
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

.flex-grow {
  flex-grow: 0;
}

.IDpicture {
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%; /* 调整左右内边距 */
}
</style>